<template>
  <div class="container">
    <!-- 整个页面 - card卡片容器组件 -->
    <el-card>
      <el-row type="flex" justify="space-between">
        <!-- from表单组件 -->
        <el-col>
          <el-form :model="query" :inline="true" label-position="left">
            <el-row type="flex">
              <el-form-item label="关键字" class="el-form-item_bug">
                <el-input
                  v-model.trim="query.keyword"
                  placeholder="根据文章标题搜索"
                  style="width: 188px"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态" class="el-form-item_bug">
                <el-select v-model="query.state" placeholder="请选择"  style="width: 188px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="reset">清除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="search"
                  type="primary"
                  style="margin-left: 10px"
                  >搜索</el-button
                >
              </el-form-item>
            </el-row>
          </el-form>
        </el-col>
        <el-col style="text-align: right">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="add()"
            >新增技巧
          </el-button>
        </el-col>
      </el-row>
      <!-- alert警告组件 -->
      <el-alert type="info" :closable="false" style="margin-bottom: 20px">
        <i class="el-icon-info">
          <span> 共计 {{ total }} 条数据</span>
        </i>
      </el-alert>
      <!-- table表格组件 -->
      <!-- 用prop属性 接收父级数据 -->
      <el-table
        :data="articlesList"
        style="width: 100%"
        :header-cell-style="{
          background: '#FAFAFA',
          color: '#909399',
          borderBottom: '2px solid #e8e8e8',
        }"
      >
        <!-- 1：序号 -->
        <el-table-column
          fixed
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <!-- 2：文章列表 -->
        <el-table-column prop="title" label="文章标题" align="center">
          <template slot-scope="{ row }">
            <!-- {{ row }} -->
            {{ row.title }}
            <el-button
              type="text"
              icon="el-icon-film"
              v-if="row.videoURL"
              style="color: #00f"
              @click="playVideo(row.videoURL)"
            ></el-button>
          </template>
        </el-table-column>
        <!-- 3：阅读数 -->
        <el-table-column
          prop="visits"
          label="阅读数"
          align="center"
        ></el-table-column>
        <!-- 4：录入人 -->
        <el-table-column
          prop="username"
          label="录入人"
          align="center"
        ></el-table-column>
        <!-- 5：录入时间 -->
        <el-table-column prop="createTime" label="录入时间" align="center">
          <template slot-scope="{ row }">
            <!-- | 时间转字符串过滤器 -->
            {{ row.createTime | parseTimeByString }}
          </template>
        </el-table-column>
        <!-- 6：状态 -->
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="{ row }">
            {{ row.state ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <!-- 7：操作 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="preview(row.id)">预览</el-button>
            <el-button
              type="text"
              v-show="row.state"
              @click="changeState(row.id, 0)"
              >禁用</el-button
            >
            <el-button
              type="text"
              v-show="!row.state"
              @click="changeState(row.id, 1)"
              >启用</el-button
            >
            <!-- <el-button type="text" :disabled="row.state === 1" @click="add(row)">修改</el-button> -->
            <el-button
              type="text"
              :disabled="Boolean(row.state)"
              @click="add(row)"
              >修改</el-button
            >
            <!-- <el-button type="text" :disabled="row.state === 1" @click="del(row.id)">删除</el-button> -->
            <el-button
              type="text"
              :disabled="Boolean(row.state)"
              @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <!-- page-sizes 每页显示个数选择器的选项设置 [5, 10, 20, 50] -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          hide-on-single-page
          layout="prev, pager, next, sizes, jumper"
          :page-size="pages.pagesize"
          :current-page="pages.page"
          :total="total"
          :page-sizes="[5, 10, 20, 50]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <!-- 新增技巧弹层 -->
    <ArticlesAdd :showAdd.sync="showAdd" :article.sync="article"></ArticlesAdd>
    <!-- 预览弹层 -->
    <ArticlesPreview :showPreview.sync="showPreview" :id="id"></ArticlesPreview>
    <!-- 小电影 -->
    <el-dialog
      title="视频"
      :visible="showVideo"
      width="50%"
      @close="closeVideo"
    >
      <div class="videobox" v-if="showVideo">
        <video class="video" :src="video" autoplay muted controls></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles' // 文章列表、文章状态、文章删除 接口
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
export default {
  name: 'interview-skills',
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      articlesList: [], // 表格数据
      total: 0, // total: 总条目数
      showAdd: false,
      showPreview: false,
      showVideo: false,
      video: '',
      article: null,
      id: 0,
      query: {
        // 表单数据对象
        // page: 1, // current-page: 当前页数
        // pagesize: 10, // page-size: 每页显示的条目个数
        keyword: null, // 文章标题关键字
        state: null // 状态
      },
      options: [
        // 选项
        { value: '0', label: '禁用' },
        { value: '1', label: '启用' }
      ],
      pageForm: {
        // page: 1, // current-page: 当前页数
        // pagesize: 10
      },
      pages: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.initList()
  },
  methods: {
    async initList () {
      const { data } = await list({ ...this.pages, ...this.query })
      this.articlesList = data.items
      this.total = data.counts
    },
    // 清除(重置)
    async reset () {
      this.query = {
        keyword: null, // 文章标题关键字
        state: null // 状态
      }
      this.pages = {
        page: 1,
        pagesize: 10
      }
      this.pageForm = { ...this.query }
      const { data } = await list({ ...this.pages })
      this.articlesList = data.items
      this.total = data.counts
    },
    // 搜索
    search () {
      if (this.query.state === '') {
        // 处理状态为空会被转成搜索0的问题
        return this.initList({
          page: this.pages.page,
          pagesize: this.pages.pagesize,
          keyword: this.query.keyword
        })
      }
      this.pages.page = 1
      this.pageForm = this.query
      this.initList()
    },
    // 新增技巧
    add (data) {
      this.showAdd = true
      if (data) this.article = data
    },
    // 预览
    preview (id) {
      this.id = id
      this.showPreview = true
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(id)
          await this.search()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 当前页数填框
    async handleCurrentChange (val) {
      this.pages.page = val
      const { data } = await list({ ...this.pageForm, ...this.pages })
      this.articlesList = data.items
      this.total = data.counts
    },
    // 每页选择条数
    async handleSizeChange (val) {
      this.pages.pagesize = val
      const { data } = await list({ ...this.pageForm, ...this.pages })
      this.articlesList = data.items
      this.total = data.counts
    },
    async changeState (id, state) {
      await changeState({ id, state })
      this.search()
      if (state === 1) {
        this.$message({
          type: 'success',
          message: '启用成功!'
        })
      } else {
        this.$message({
          type: 'success',
          message: '禁用成功!'
        })
      }
    },
    // 小电影链接
    playVideo (url) {
      this.showVideo = true
      this.$nextTick(() => {
        this.video = url
      })
    },
    closeVideo () {
      this.showVideo = false
      this.video = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.videobox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.video {
  width: 100%;
  height: 100%;
}
.container {
  padding: 10px;
}
.el-form-item_bug {
  white-space: nowrap;
}
</style>
